<template>
	<view class="content">
		<scroll-view scroll-x="true" class="scrollx">
			<view class="item" :class="selectIntex == index ?'selectItem' : '' " v-for="(data,index) in titleList"
				:key="data.id" @click="selectItemf(index)">
				<text>{{data.classname}}</text>
			</view>
		</scroll-view>
		<view class="loseData" v-if="newsList.length === 0">
			<image src="../../static/zwsj.png" mode="aspectFit"></image>
		</view>
		<view class="contentBox" v-else>
			<NewsCell v-for="data in newsList" :key="data.id" :data="data"></NewsCell>
		</view>
		<view class="bottomView" v-show="isShowTip">
			<text>{{tip}}</text>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				selectIntex: 0,
				titleList: [],
				newsList: [],
				page: 1,
				isAll: false,
				tip: "数据加载中",
				isShowTip: false
			}
		},
		computed: {
			selectItem() {
				return this.titleList[this.selectIntex]
			}
		},
		watch: {
			titleList(newVal, oldVal) {
				this.getNewsList(newVal[0]);
			},
			selectIntex(newVal, oldVal) {
				this.page = 1
				this.isAll = false
				this.getNewsList(this.titleList[newVal]);
			},
			page(newVal) {
				this.tip = "加载更多"
			}

		},
		onLoad() {
			this.getTitleList();
		},
		// 上拉加载
		onReachBottom() {
			if (!this.isAll) {
				this.page += 1
				this.isShowTip = true
				this.getNewsList(this.titleList[this.selectIntex]);
			} else {
				this.isShowTip = true
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getNewsList(this.titleList[this.selectIntex]);
		},

		methods: {
			selectItemf(index) {
				this.selectIntex = index
			},
			getNewsList(data) {

				uni.request({
					url: `https://ku.qingnian8.com/dataApi/news/newslist.php?cid=${data.id}&page=${this.page}`,
					success: (res) => {
						console.log(res)
						uni.stopPullDownRefresh()

						if (this.page == 1) {
							this.newsList = res.data
						} else {
							this.newsList = this.newsList.concat(res.data)
						}
						if (res.data.length < 8 && this.newsList.length != 0) {
							this.isAll = true
							this.isShowTip = true
							this.tip = "我是有底线的"
						} else {
							this.isShowTip = false
						}

					},
					fail: (error) => {
						uni.showToast({
							duration: 2000,
							mask: true,
							title: err.errMsg
						})
						console.log(error.errMsg)
					},

				})
			},
			getTitleList() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: (res) => {
						this.titleList = res.data
					},
					fail: (error) => {
						uni.showToast({
							duration: 2000,
							mask: true,
							title: err.errMsg
						})
						console.log(error.errMsg)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.loseData {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.scrollx {
			height: 88rpx;
			background: #B2C9D2;
			white-space: nowrap;
			position: fixed;
			z-index: 10;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.item {
				padding: 0rpx 30rpx;
				height: inherit;
				display: inline-block;
				line-height: 88rpx;
			}

			.selectItem {
				text {
					color: #FF4500;
				}
			}
		}

		.contentBox {
			padding-top: 88rpx;
		}

		.loseData {
			image {
				width: 350rpx;
			}
		}

		.bottomView {
			display: flex;
			flex-direction: row;
			justify-content: center;

			text {
				text-align: center;
				color: #FF4500;
			}
		}
	}
</style>